import { imagesList } from '@/config'
import { appConfigActions } from '@/store/appConfigSlice'
import { useAppDispatch, useAppSelector } from '@/utils/hooks'
import { Image, getClassNames } from 'magic-ui-react'
import { useEffect, useState } from 'react'
import styles from './styles.module.less'
const Wallpaper = () => {
  const {
    currentImage
  } = useAppSelector(state => state.appConfig.background)

  const {
    off: { }
  } = useAppSelector((state) => state);
  const dispatch = useAppDispatch();

  const tags = [...new Set(imagesList.map(e => e.tags[0]))]
  const [currentType, setCurrentType] = useState(tags[0]);
  const [newImageList, setNewImageList] = useState<any[]>([]);

  useEffect(() => {
    let newCurrentType = imagesList.find((item) => item.url === currentImage)
    setCurrentType(newCurrentType?.tags[0]!)
  }, [])

  useEffect(() => {
    setNewImageList(imagesList.filter((item) => item.tags.findIndex(e => e === currentType) !== -1))
  }, [currentType])

  return (
    <div className={styles.Wallpaper}>
      <ol className='flex gap-2 flex-wrap'>
        {tags.map(e => {
          return (
            <li
              key={e}
              onClick={() => {
                setNewImageList([])
                setCurrentType(e)
              }}
              className={
                getClassNames([
                  styles.tag,
                  {
                    [styles.tagChecked]: e === currentType
                  }
                ])
              }
            >
              {e}
            </li>
          )
        })}
      </ol>
      <div className={styles.listContent}>
        <div className={styles.imagesList} >
          {newImageList.map((item, index) => {
            return (
              <div
                key={index}
                className={getClassNames([
                  styles.imagesItem,
                  {
                    [styles.imagesChecked]: currentImage === item.url,
                  }
                ])}
                onClick={(() => {
                  dispatch(appConfigActions.updataBackground({
                    currentImage: item.url
                  }))
                })}
              >
                <Image src={item.url} />
              </div>
            )
          })}
        </div>
      </div>

    </div>

  )
}

export default Wallpaper